<template>
	<div>
		<div v-for="item in topicList" :key="item.id" class="box">
			<img :src="item.scene_pic_url">
			<p>{{item.title}}</p>
			<p>{{item.subtitle}}</p>
			<p>￥ {{item.price_info}} 元起</p>
		</div>
		<div class="anniu">
			<button @click="add(1)" :class="{'bfc':page===1}">上一页</button>
			<button @click="add(2)" :class="{'bfc':page===2}">下一页</button>
		</div>
	</div>
	</template>
	
	<script>
	import axios from 'axios'
	export default {
		data(){
			return {
				topicList:[],
				page:1,
			}
		},
		created(){
			this.add(1)	
		},
		methods:{
			add(page){
				axios.get("api/topic/list",{params:{page:page,size:10}}).then((res)=>{
				console.log(res);
				this.topicList=res.data.data.data
				this.page=page
				})
			},
		}
	}
	</script>
	<style scoped>
	*{
		margin: 0;
		padding: 0;
	}
	.box{
		width: 100%;
	}
	.box>p{
		text-align: center;
		overflow:hidden;/* 溢出隐藏 */
		text-overflow: ellipsis;/* 出现省略号... */
		white-space:nowrap;	/* 强制不换行 */
		line-height: 50px;
	}
	.box>p:nth-child(2){
		font-size: 20px;
	}
	.box>p:nth-child(3){
		font-size: 18px;
	}
	.box>p:nth-child(4){
		font-size: 18px;
		color: crimson;
	}
	img{
		max-width:100%;
	}
	button{
		width: 50%;
		height: 30px;
		background-color: white;
		font-size: 18px;
		color: #ccc;
		border: 1px solid #ccc;
		color: brown;
	}
	.anniu{
		width: 100%;
		height: 80px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.bfc{
		border: none;
		color: #ccc;
	}
	</style>